import React from 'react';
import { Row, Col, Spin, Carousel } from 'antd';
import { ModalC } from '../../../../comps';
import { connect, routerRedux } from 'dva';
import InverstMent from './InverstMent';
import noticeStyle from './index.less';
import HeadPng from '../../../../assets/busi/OperatePlatform/notice.png';
import moment from 'moment';
class NoticeAnnonce extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //通知公告
      toolInfo: {},
      data: {
        normal: [],
        urgent: [],
        noUrgent: [],
      },
      modalVisible: false,
      status: null,
    };
  }
  componentDidMount() {
    const that = this;
    const { dispatch } = this.props;
    this.mounted = true;
    // //查询字典
    dispatch({
      type: 'DashBoardNewM/fetchDictByKeys',
      payload: ['LOCAL_MSG_VALIDITYTYPE', 'LOCAL_MSG_TYPE', 'MAAT_PRODUCT_ACCOUNT_EXCHANGE'],
    });
    // 查询数据
    dispatch({
      type: 'DashBoardNewM/getNoticeAnnounce',
      payload: {
        userId: localStorage.getItem('antd-pro-userId'),
        status: 1,
      },
      callback: (res) => {
        if (res) {
          if (this.mounted) {
            //确保轮播的加载是在数据加载完
            that.setState({
              data: {
                normal: res?.normal || [],
                urgent: res?.urgent || [],
                noUrgent: res?.noUrgent || [],
              },
            });
          }
        }
      },
    });
  }
  componentWillUnmount() {
    this.mounted = false;
  }
  //点击更多
  ClickMore = () => {
    //通知公告更多
    const { dispatch } = this.props;
    dispatch(routerRedux.push(`/localMsg`));
  };
  //  通知公告明细
  onEditItem = (item, status) => {
    this.setState({
      status: status,
      toolInfo: item,
      modalVisible: true,
      type: 'view',
    });
  };
  //取消
  onCancel = () => {
    this.setState({
      modalVisible: false,
      toolInfo: {},
    });
  };
  render() {
    // 3是不紧急  2是一般  1是紧急
    const that = this;
    const { type, toolInfo, status } = this.state;
    const {
      DashBoardNewM: { dictMap },
      loading,
    } = this.props;

    const {
      data: { normal, urgent, noUrgent },
    } = this.state;
    let arr = [];
    arr.push(normal.length, urgent.length, noUrgent.length);
    let numGet = arr.filter((item, index) => item > 0).length;
    return (
      <Spin spinning={loading}>
        <div className={noticeStyle.noticeWrap}>
          <div className={noticeStyle.imgS}>
            <img src={HeadPng} alt='通知' />
          </div>
          {normal.length || urgent.length || noUrgent.length ? (
            <>
              <div className={noticeStyle.noticeLoop} style={{ width: 'calc(100% - 80px)' }}>
                <Row style={{ width: '100%', overflow: 'hidden' }}>
                  {urgent.length ? (
                    <Col span={numGet == 3 ? 8 : numGet == 2 ? 12 : numGet == 1 ? 24 : 8}>
                      <div className='swiper-containerOne' style={{ height: '50px', overflow: 'hidden' }}>
                        <Carousel autoplay dotPosition='left' dots={false} autoplaySpeed={6000}>
                          {urgent.length &&
                            urgent.map((item, index) => {
                              return (
                                <div className='swiper-slide' key={index} style={{ height: '50px' }}>
                                  <div className={noticeStyle.wrapperContents} onClick={() => this.onEditItem(item, '1')}>
                                    <div className={noticeStyle.noticeWrappers}>
                                      <span className={noticeStyle.urgent}>紧急</span>
                                      <span className={noticeStyle.spans} title={item.title}>
                                        {item.title}
                                      </span>
                                    </div>
                                    <div className={noticeStyle.userIonfo}>
                                      <span className={noticeStyle.timeLine}>{moment(item.targetdt).format('YYYY-MM-DD')}</span>
                                      <span className={noticeStyle.spanLabel} title={item.creatorName}>
                                        {item.creatorName}
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                        </Carousel>
                      </div>
                    </Col>
                  ) : (
                    ''
                  )}
                  {normal.length ? (
                    <Col span={numGet == 3 ? 8 : numGet == 2 ? 12 : numGet == 1 ? 24 : 8}>
                      <div className='swiper-containerTwo' style={{ height: '50px', overflow: 'hidden' }}>
                        <Carousel autoplay dotPosition='left' dots={false} autoplaySpeed={6000}>
                          {normal.length &&
                            normal.map((item, index) => {
                              return (
                                <div className='swiper-slide' key={index}>
                                  <div className={noticeStyle.wrapperContents} onClick={() => this.onEditItem(item, '2')}>
                                    <div className={noticeStyle.noticeWrappers}>
                                      <span className={noticeStyle.normal}>一般</span>
                                      <span className={noticeStyle.spans} title={item.title}>
                                        {item.title}
                                      </span>
                                    </div>
                                    <div className={noticeStyle.userIonfo}>
                                      <span className={noticeStyle.timeLine}>{moment(item.targetdt).format('YYYY-MM-DD')}</span>
                                      <span className={noticeStyle.spanLabel} title={item.creatorName}>
                                        {item.creatorName}
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                        </Carousel>
                      </div>
                    </Col>
                  ) : (
                    ''
                  )}
                  {noUrgent.length ? (
                    <Col span={numGet == 3 ? 8 : numGet == 2 ? 12 : numGet == 1 ? 24 : 8}>
                      <div className='swiper-containerThree'>
                        <Carousel autoplay dotPosition='left' dots={false} autoplaySpeed={6000}>
                          {noUrgent.length &&
                            noUrgent.map((item, index) => {
                              return (
                                <div key={index}>
                                  <div className={noticeStyle.wrapperContents} onClick={() => this.onEditItem(item, '3')}>
                                    <div className={noticeStyle.noticeWrappers}>
                                      <span className={noticeStyle.unUrgent}>不紧急</span>
                                      <span className={noticeStyle.spans} title={item.title}>
                                        {item.title}
                                      </span>
                                    </div>
                                    <div className={noticeStyle.userIonfo}>
                                      <span className={noticeStyle.timeLine}>{moment(item.targetdt).format('YYYY-MM-DD')}</span>
                                      <span className={noticeStyle.spanLabel} title={item.creatorName}>
                                        {item.creatorName}
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                        </Carousel>
                      </div>
                    </Col>
                  ) : (
                    ''
                  )}
                </Row>
              </div>
            </>
          ) : (
            <div className={noticeStyle.noData}>暂无数据</div>
          )}
          <div className={noticeStyle.moreFn} onClick={this.ClickMore}>
            更多>
          </div>
        </div>
        <ModalC width={900} title='消息' destroyOnClose={true} footer={null} visible={this.state.modalVisible} onCancel={this.onCancel}>
          <InverstMent type='view' status={status} toolInfo={toolInfo} dictMap={dictMap} user={this.props.user} that={that}></InverstMent>
        </ModalC>
      </Spin>
    );
  }
}
export default connect(({ DashBoardNewM, userM: user, loading }) => ({ DashBoardNewM, user, loading: loading.effects['DashBoardNewM/getNoticeAnnounce'] }))(NoticeAnnonce);
